﻿@{
    ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<script src="~/Scripts/ag-grid/ag-grid-community.js"></script>
<link href="~/Scripts/ag-grid/styles/compiled-icons.css" rel="stylesheet" />
<link href="~/Scripts/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<link href="~/Scripts/ag-grid/styles/ag-theme-blue.css" rel="stylesheet" />
Ag_Grid

<div id="myGrid" style="height: 600px;width:100%;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">
    // 定义列
    /**
     * headerName 列头显示名称
     * field 对应数据列名称
     * sortable 启用排序
     * filter 启用过滤器
     * */
    var columnDefs = [
        { headerName: "Make", field: "make", sortable: true, filter: true  },
        { headerName: "Model", field: "model", sortable: true, filter: true },
        { headerName: "Price", field: "price", sortable: true, filter: true  }
    ];

    // 定义数据
    var rowData = [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ];

    // 定义grid属性，grid有哪些列和数据
    var gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

    // 获取标签元素
    var eGridDiv = document.querySelector('#myGrid');
    
    // 使用传入的Div和列、数据创建grid
    new agGrid.Grid(eGridDiv, gridOptions);

</script>